<template>
  <div class="detail">
      <van-nav-bar
        title="详情页"
        class="detail-nav"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right> </template>
      </van-nav-bar>

    <h1>{{ product.name }}</h1>
    <div class="content" v-html="product.content"></div>

    <van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
  <van-goods-action-icon icon="cart-o" text="购物车" :to="{ name: 'Cart' }"/>
  <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
  <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton"/>
  <van-goods-action-button type="danger" text="立即购买" @click="onClickIcon"/>
</van-goods-action>
  </div>
</template>

<script>
import {Toast} from "vant";
import { loadProductByIdAPI } from "../services/products";
import { addToCartAPI } from "../services/carts";

export default {
  data() {
    return {
      product: {},
    };
  },
  created() {
    loadProductByIdAPI(this.$route.query.id).then((res) => {
      this.product = res.data;
    });
  },
  methods: {
    // 加入购物车
      async onClickButton() {
        await addToCartAPI(this.product.id,1,this.product.price);
          Toast.success({
            message:"加入购物车成功"
          })
      
    },   
    // 立即购买
    onClickIcon() {
      this.$router.push({
        name:"Order",
      })
    },
    
    //退回
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  .detail-nav {
    position: sticky;
    top: 0;
    z-index: 9;
  }
}
</style>